<template>
  <div>
    <el-table :data="localOrders" style="width: 100%" :stripe="true">
      <el-table-column prop="orderId" label="订单编号" ></el-table-column>
      <el-table-column prop="orderSn" label="订单号"></el-table-column>
      <el-table-column prop="userId" label="用户ID"></el-table-column>
      <el-table-column prop="addressId" label="地址ID" ></el-table-column>
      <el-table-column prop="totalAmount" label="总金额"></el-table-column>
      <el-table-column prop="payAmount" label="实际支付金额"></el-table-column>
      <el-table-column prop="freightAmount" label="运费金额"></el-table-column>
      <el-table-column label="订单状态" width="120">
        <template v-slot="scope">
          {{ OrderStatusMap[scope.row.orderStatus] }}
        </template>
      </el-table-column>
      <el-table-column prop="paymentMethod" label="支付方式"></el-table-column>
      <el-table-column prop="paymentTime" label="支付时间"></el-table-column>
      <el-table-column prop="createdAt" label="创建时间"></el-table-column>
      <el-table-column label="操作" width="120">
        <template v-slot="scope">
          <div class="operation-buttons">
            <el-button @click="$emit('confirm', scope.row.orderId)"> 确认订单</el-button>
            <el-button @click="$emit('cancel', scope.row.orderId)"> 取消订单</el-button>
            <el-button @click="$emit('view', scope.row.orderId)"> 查看订单</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'OrderShow',
  props: {
    orders: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      localOrders: this.orders ? this.orders: [],
      OrderStatusMap: {
        0: '代付款',
        1: '待发货',
        2: '待收货',
        3: '待评价',
        4: '已完成',
        5: '已取消',
        6: '退款中',
      }
    }
  },
  watch: {
    orders: {
      handler(newVal) {
        this.localOrders = newVal;
      },
      deep: true,
      immediate: true
    }
  }
}
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
}
th, td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
th {
  background-color: #f8f9fa;
  color: #333;
}
tr:hover {
  background-color: #f1f1f1;
}
.operation-buttons {
  display: flex;
  flex-direction: column;
  align-items: center; /* 如果你想让按钮在列中水平居中 */
}
</style>
